<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>框模型</title>
<style type="text/css">
	body{
		color: #000;
		background-color: #fff;
		font-family: arial,verdana,sans-serif;
		font-size: 12px;	
		line-height: 24px;
	}
	
	body,h1,p,img,b{
		border-style: solid;
		border-width: 2px;
		border-color: #000;
		padding:2px;
	}
	
	h1,b{
		background-color: #ccc;	
	}
	
	div.first{
		width: 800px;
		height: 400px;
		border:2px solid blue;
	}
	
	p#test{
		border:1px solid black;	
		#padding:10%;
		padding-left: 10%;
		padding-top: 10%;
		margin:20%;
	}
	
	table#tab{
		border:2px solid black;	
	}
		table#tab tr.odd{
		background-color: gray;	
	}
	table#tab tr{
		border:1px solid black;
		background-color:green;
	}	
	table#tab td{
		padding:5px;	
	}
	table#tab th{
		border:1px solid black;	
		background-color: #000;
		color:#fff;
	}
	table#show{
		#如果是collapse则border-spacing无效。
		border-collapse: separate;
		border:5px solid gray;	
		border-spacing: 10px;
		caption-side: right;
	}
	table#show td{
		width: 100px;
		border:3px solid black;
	}
	table#show caption{
		border:7px dashed red;	
		background-color: grey;
	}
	p#outline{
		width: 400px;	
		outline-color: red;
		margin:10px;
		outline-style:dashed;
	}
	
	p.abstract:after{
		content:"hello world"
		color:red;
		border:2px dashed blue;
	}
</style>

</head>
<body>
	<h1>Thinking Inside the Box</h1>
	<p class="description">When you are styling a web page with CSS page you
	must start to think in terms of <b>boxes</b>.</p>
	<p>Each element is treated as if it generates a new box. Each box can have
	new rules associated with it.</p>
	<img src="logo.jpg" alt="How CSS treats a box" />
	<p>As you can see from the diagram above, each box has a <b>border</b>.
	Between the content and the border you can have <b>padding</b>,and 
	outside of the border you can have a <b>margin</b> to separate this box
	from any neighboring boxes.	
	</p>
	<br />
	<br />
	<div class="first">
		<p id="test">
			hello world!!!		
		</p>
	</div>
	<br />
	<br />
	<table id="tab">
		<tr>
			<th>Quantity</th>
			<th>Ingredient</th>
		</tr>
		<tr class="odd">
			<td>3</td>
			<td>Eggs</td>
		</tr>
		<tr>
			<td>100ml</td>
			<td>Milk</td>
		</tr>
		<tr class="odd">
			<td>200g</td>
			<td>Spinach</td>		
		</tr>
		<tr>
			<td>1 pinch</td>	
			<td>Cinnamon</td>
		</tr>
	</table>
	
	<ul>
		<li style="marker-offset:10em;">hello world</li>
		<li>hello hopy</li>
	</ul>
	<table id="show">
		<caption>hello cell</caption>
		<tr>
			<td>cell 01</td>
			<td>cell 02</td>
		</tr>
		<tr>
			<td>cell 03</td>
			<td>cell 04</td>
		</tr>
		<tr>
				<td>cell 05</td>
				<td>cell 06</td>
		</tr>
	</table>
	<br />
	<br />
	<p id="outline">hello world!!!<br />
	best coder in the world!!!!!!
	</p>
	<p class='abstract'>
		hello myself!!!!
	</p>
</body>
</html>